<template>
  <van-nav-bar left-arrow @click-left="onClickLeft" />
  <div class="title" style="background: white; height: 615px">
    <p>完善信息</p>
    <span>请精准填写孩子信息，有助于课程的精准匹配</span>
    <van-tabbar v-model="active" :fixed="false" @change="onChange">
      <van-tabbar-item v-for="item in iconList" :key="item.id">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          placeholder="宝贝英文名"
          :rules="[
            {
              required: true,
              pattern: pattern1,
              message: '不能填写汉字',
            },
          ]"
        />
        <van-field
          v-model="value2"
          name="cusername"
          placeholder="请输入中文名"
          :rules="[
            {
              required: true,
              pattern: pattern2,
              message: '只能输入中文',
            },
          ]"
        />
        <van-field
          v-model="value1"
          name="birthday"
          placeholder=" 宝贝日期，例如：2014-01-01"
          :rules="[
            {
              required: true,
              pattern,
              message: '请输入正确日期格式，例如：2014-01-01',
            },
          ]"
        />
        <van-button type="default" @click="getName">智能取名</van-button>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">开启学习之旅</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { infoApi, getMyInfoApi } from "../utils/api";
export default {
  setup() {
    const { active, iconList } = setSex();
    const { username, value1, value2, pattern, pattern1, pattern2 } = setUsername();
    let sex = "男";
    const onChange = index => {
      sex = iconList[index].title;
    };
    const router = useRouter();
    const onSubmit = async values => {
      let token = localStorage.getItem("token");
      values.sex = sex;
      values.token = token;
      const res = await infoApi(values);
      console.log(res);
      router.push("/reg2");
    };
    const onClickLeft = () => history.back();

    const getName = () => {
      let str = ["Marry", "Tom", "Baby", "Angler", "Wuyuzi", "Wangmaoqing"];
      let math = Math.ceil(Math.random() * 100000);
      let index = Math.floor(Math.random() * str.length);
      username.value = str[index] + math;
    };
    const token = localStorage.getItem("token");
    getMyInfoApi({ token }).then(res => {
      if (res.status === 0) {
        username.value = res.results.username;
        value2.value = res.results.cusername;
        value1.value = res.results.birthday;
        if (res.results.sex === "男") {
          active.value = 0;
        } else {
          active.value = 1;
        }
      }
    });

    return {
      onClickLeft,
      iconList,
      active,
      onChange,
      username,
      onSubmit,
      value1,
      value2,
      pattern,
      pattern1,
      pattern2,
      getName,
    };
  },
};
//性别框
function setSex() {
  const active = ref(0);
  const iconList = [
    {
      active: require("../assets/image/boy1.png"),
      inactive: require("../assets/image/boy.png"),
      id: new Date().getTime(),
      title: "男",
      sex: 1,
    },
    {
      active: require("../assets/image/girl1.png"),
      inactive: require("../assets/image/girl.png"),
      id: new Date().getTime(),
      title: "女",
      sex: 0,
    },
  ];
  // let sex = "男";
  // const onChange = (index) => {
  //   sex = iconList[index].title;
  // };
  return { active, iconList };
}
//表单正则
function setUsername() {
  const value1 = ref("");
  const pattern = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
  const value2 = ref("");
  const pattern2 = /^[\u4e00-\u9fa5]{2,10}$/;
  const username = ref("");
  const pattern1 = /^[a-z0-9A-Z]+$/;
  return { username, value1, value2, pattern, pattern1, pattern2 };
}
</script>

<style lang="less" scoped>
.van-button--default {
  position: absolute;
  top: 16px;
  right: 25px;
  border-radius: 50px;
  height: 30px;
  color: #3b98ff;
}
.van-form {
  width: 88%;
  .van-cell-group {
    margin-right: 0px;
    margin-left: 0px;
    position: relative;
  }
  /deep/.van-field__body {
    width: 100%;
    height: 44px;
    border-radius: 50px;
    background-color: #dfdfdf;
    input {
      width: 60%;
      margin-left: 20px;
    }
    input::-webkit-input-placeholder {
      position: relative;
      left: 20px;
    }
  }
}
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  p {
    font-size: 17px;
    font-weight: 600;
  }
  span {
    font-size: 12px;
    color: #666666;
    margin-top: 14px;
  }
  .van-tabbar {
    height: 150px;
    img {
      height: 75px;
      width: 75px;
    }
  }
  .van-tabbar-item__text {
    span {
      font-size: 15px;
      font-weight: 600;
    }
  }
}
.van-tabbar-item--active span {
  color: #1989fa !important;
}
</style>
